<template>
    <div class="contancer" ref="container" @click="onContancer">
    </div>
</template>

<script setup lang="ts">
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader'
import { onMounted, ref } from 'vue'
import gsap from 'gsap'
// import Vrimg from '@/assets/vrimsge.jpg'
const HOUSES = [
    '../../../public/images/house01.hdr',
    '../../../public/images/house02.hdr',
    '../../../public/images/house03.hdr',
    '../../../public/images/house04.hdr',
    '../../../public/images/house05.hdr',
    '../../../public/images/house06.hdr',

]
let HOUSE = HOUSES[0]
const HOUSE1 = new URL(HOUSE, import.meta.url).href
const JLT = new URL('../../../public/images/R.jpg', import.meta.url).href
const container = ref()
// 场景
let scene: any
// 相机
let camera: any
let cube: any
let renderer: any
let controls: any
// 精灵
let sprite: any
// 初始化场景
function initScene() {
    scene = new THREE.Scene()

}
// 初始化相机 tour 透视相机
function initCamera() {
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000)
    // 设置相机位置
    camera.position.z = 1
    // camera.position.y = 1
    camera.position.x = 2.5
    scene.add(camera)

}

// 初始化物体
function initBox(HOUSE: any) {

    const textureLoader = new RGBELoader();
    textureLoader.loadAsync(HOUSE).then((texture: any) => {

        const geometry = new THREE.SphereGeometry(45, 96, 96);

        const material = new THREE.MeshBasicMaterial({ map: texture });

        cube = new THREE.Mesh(geometry, material);

        cube.geometry.scale(1, 1, -1);

        scene.add(cube);

    })

}


// 初始化 渲染器
function initRenderer() {
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    container.value?.appendChild(renderer.domElement)

}

// 初始化控制器
function initControls() {
    controls = new OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
}

// 初始化精灵
function initSplte() {
    // 创建精灵
    const map = new THREE.TextureLoader().load(JLT);
    // 创建文理
    const material = new THREE.SpriteMaterial({ map: map });
    // 设置纹理
    sprite = new THREE.Sprite(material);
    // 设置精灵大小
    sprite.scale.set(1, 1, 1);
    // 设置精灵位置
    sprite.position.set(-35, -5, -10);
    // 精灵图添加属性作区分
    sprite.content = '客厅'

    // 添加到场景
    gsap.to(sprite.position, {
        y: 0.1,
        duration: 2,
        repeat: -1,
        yoyo: true
    })
    scene.add(sprite);

}



const onContancer = () => {
    const raycaster = new THREE.Raycaster();
    const pointer = new THREE.Vector2();
    // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)

    pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
    pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;


    // 通过摄像机和鼠标位置更新射线
    raycaster.setFromCamera(pointer, camera);

    // 计算物体和射线的焦点

    const intersects = raycaster.intersectObjects(scene.children);
    // 遍历所有相交的物体
    for (let i = 0; i < intersects.length; i++) {
        const object = intersects[i].object;
        // 判断是否为精灵
        if (object.content === '客厅') {

            console.log(object.content);
            // gsap.to(camera.position, {
            //     x: 30,
            //     y: 5,
            //     z: 8,
            //     duration: 1,
            //     // repeat: -1,
            //     // yoyo: true
            //     onComplete: () => {
            //         initBox(HOUSE2)
            //     }
            // })
            container.value.style.transform = 'scale(4)';
            container.value.style.filter = 'blur(10px)';
            // filter: blur(10px);
            container.value.style.transition = '.8s';

            // transform: scale(3);
            // transition: 1;
            console.log(HOUSE);

            switch (HOUSE) {
                case '../../../public/images/house01.hdr':
                    HOUSE = HOUSES[1];
                    break;
                case '../../../public/images/house02.hdr':
                    HOUSE = HOUSES[2];
                    break;
                case '../../../public/images/house03.hdr':
                    HOUSE = HOUSES[3];
                    break;
                case '../../../public/images/house04.hdr':
                    HOUSE = HOUSES[4];
                    break;
                case '../../../public/images/house05.hdr':
                    HOUSE = HOUSES[5];
                    break;
                case '../../../public/images/house06.hdr':
                    HOUSE = HOUSES[0];
                    break;

                default:
                    break;
            }
            setTimeout(() => {
                initBox(HOUSE)
                container.value.style.filter = 'blur(0px)';
                container.value.style.transform = 'scale(1)';
                container.value.style.transition = '.5s';
            }, 500);

        }
    }
    console.log(intersects);

}
window.addEventListener('resize', () => {
    // 重置相机宽高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 调用相机矩阵
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
})
// 封装渲染函数
function animate() {
    renderer.render(scene, camera)
    controls.update();
    requestAnimationFrame(animate)
    // cube.rotation.x += 0.01
    // cube.rotation.y += 0.01

}

// 获取dom
onMounted(() => {
    initScene()
    initCamera()
    initBox(HOUSE)
    initSplte()
    initRenderer()
    initControls()
    animate()

})




</script>

<style scoped>
.contancer {
    width: 100vw;
    height: 100vh;
    background: red;

}
</style>